<template>
  <div class="project-info">
    <div class="project-tabs">
      <span :class="activeName=='type'?'active':''" @click="handleTab('type')">项目类型</span>
      <span :class="activeName=='state'?'active':''" style="margin-left: 22px;" @click="handleTab('state')">项目状态</span>
    </div>
    <div class="project-content">
      <div v-if="activeName=='type'" class="project-type">
        <div class="unit">单位：个</div>
        <div id="echarts-type" />
      </div>
      <div v-if="activeName=='state'" class="project-state">
        <div class="unit">单位：个</div>
        <div id="echarts-state" />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import axios from 'axios'
import Global from '../../utils/Global.js'
const uplodadUrl = Global.uplodadUrl
export default {
  data() {
    return {
      activeName: 'type',
      typeData: [],
      projectTotal: 0,
      typeLegendData: [],
      statusData: [],
      statusLegendData: []

    }
  },
  mounted() {
    this.GetStatisticalDataGroupByProjectType()
  },
  methods: {
    handleTab(val) {
      if (val === 'type') {
        this.activeName = 'type'
        this.$nextTick(this.GetStatisticalDataGroupByProjectType)
      }
      if (val === 'state') {
        this.activeName = 'state'
        this.$nextTick(this.GetStatisticalDataGroupByProjectStatus)
      }
    },
    // 获取项目类型数据
    GetStatisticalDataGroupByProjectType() {
      const _this = this
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetStatisticalDataGroupByProjectType`
      }).then((res) => {
        // console.log(res, '项目类型数据')
        _this.typeData = [] // 清空
        _this.typeLegendData = []
        res.data.data.forEach(item => {
          const obj = {}
          obj.name = item.yizsf
          obj.value = item.zongsl
          obj.money = item.zongje
          _this.typeData.push(obj)
          _this.typeLegendData.push(item.yizsf)
        })
        // console.log(_this.typeData, '处理后项目类型数据')
        _this.drawEchartsType()
      })
    },
    // 项目类型
    drawEchartsType() {
      // 基于准备好的dom，初始化echarts实例
      const _this = this
      const myChart = echarts.init(document.getElementById('echarts-type'))
      // 绘制图表
      myChart.setOption({
        // 图表显示颜色
        color: ['#FDDC4C', '#FF8F38', '#49ACF6', '#62D9AD', '#5A6B98', '#9DE0FC', '#c23531'].slice(0, _this
          .typeLegendData.length),
        legend: {
          orient: 'horizontal',
          x: 'left', // 图例距离左的距离
          y: '300px', // 图例上下居中
          itemWidth: 7,
          itemHeight: 7,
          data: _this.typeLegendData
        },
        tooltip: {
          trigger: 'item',
          // formatter: "{b}<br/>数量：{c}个<br/>金额：{e}亿"
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:#FDDC4C;border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.value}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.money}亿</div>
          </div>`
          }
        },
        series: [{
          type: 'pie',
          radius: ['0', '70%'],
          // 圆环位置
          center: ['50%', '35%'],
          // 防止标签重叠
          avoidLabelOverlap: true,
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: _this.typeData
        }]
      })
    },
    // 获取项目状态数据
    GetStatisticalDataGroupByProjectStatus() {
      const _this = this
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetStatisticalDataGroupByProjectStatus`
      }).then((res) => {
        // console.log(res, '项目状态数据')
        _this.statusData = [] // 清空
        _this.statusLegendData = []
        _this.projectTotal = 0
        res.data.data.forEach(item => {
          const obj = {}
          obj.name = item.xiangmzt
          obj.value = item.zongsl
          obj.money = item.zongje
          _this.projectTotal += item.zongsl
          _this.statusData.push(obj)
          _this.statusLegendData.push(item.xiangmzt)
        })
        // console.log(_this.statusData, '处理后项目类型数据')
        _this.drawEchartsStatus()
      })
    },
    // 项目状态
    drawEchartsStatus() {
      const _this = this
      const myChart2 = echarts.init(document.getElementById('echarts-state'))
      // 绘制图表
      myChart2.setOption({
        // 图表显示颜色
        color: ['#FDDC4C', '#FF8F38', '#62D9AD', '#5A6B98', '#9DE0FC'].slice(0, _this.statusLegendData.length),
        legend: {
          orient: 'horizontal',
          x: 'left', // 图例距离左的距离
          y: '300px', // 图例上下居中
          itemWidth: 7,
          itemHeight: 7,
          data: _this.statusLegendData
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:#FDDC4C;border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.value}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.money}亿</div>
          </div>`
          }
        },
        series: [{
          type: 'pie',
          radius: ['50', '70%'],
          // 圆环位置
          center: ['50%', '35%'],
          // 防止标签重叠
          avoidLabelOverlap: true,
          label: {
            normal: { // normal 是图形在默认状态下的样式
              show: true,
              position: 'center',
              color: '#333',
              fontSize: 14,
              fontWeight: 400,
              formatter: '本年度\n\n共' + _this.projectTotal + '个' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: _this.statusData
        }]
      })
    }
  }

}

</script>
<style lang="scss" scoped>
  .project-info {
    width: 100%;
    height: 424px;
    margin-top: 5px;
    background: #FFFFFF;

    .project-tabs {
      border-bottom: 1px solid #1468B7;
      padding-top: 7px;
      padding: 10px;

      span {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        line-height: 22px;
        cursor: pointer;

      }

      .active {
        color: #333;
        font-weight: 600;
      }
    }

    .project-content {

      .project-type {
        .unit {
          width: 56px;
          height: 20px;
          font-size: 14px;
          margin-left: 13px;
          margin-top: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #3E3E3E;
          line-height: 20px;
        }

        #echarts-type {
          margin: 5px auto;
          width: 340px;
          height: 340px;

          &>div {
            z-index: 1
          }
        }
      }

      .project-state {
        .unit {
          width: 56px;
          height: 20px;
          font-size: 14px;
          margin-left: 13px;
          margin-top: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #3E3E3E;
          line-height: 20px;
        }

        #echarts-state {
          margin: 5px auto;
          width: 340px;
          height: 340px;

          &>div {
            z-index: 1
          }
        }
      }

    }
  }

</style>
